<style> #box{ box-shadow: 0 0 20px rgba(0,0,0,1); border-radius: 8px; width: 365px; height: 400px; background: #ff00ff; padding: 15px; border-style: double; background: #959595; /* Old browsers */ background: -moz-linear-gradient(45deg, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* IE10+ */ background: linear-gradient(45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .buton{ cursor: pointer; font: normal small-caps 12px/14px fantasy; border: 3px; border-style:ridge; border-color: #828282; border-radius: 5px; color: #ffffff; background: #ff00ff; display:inline-block; padding: 3px; background: #aebcbf; /* Old browsers */ background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */ background: linear-gradient(to bottom, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */ } .buton:hover{ color: #ffff00; border: 3px; border-style:groove; border-color: #828282; background: #aebcbf; /* Old browsers */ background: -moz-linear-gradient(-45deg, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */ background: linear-gradient(135deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } </style> <div id="box"> <div class="buton" id="btn1">start</div> <div class="buton" id="btn3">+</div> <div class="buton" id="btn4">--</div> <div class="buton" id="btn4p">----</div> <div class="buton" id="btn3p">++</div> <div class="buton" id="btn2">stop</div> <div class="buton" id="btn5">scroll up</div> <div class="buton" id="btn6">scroll down</div> <table id="tab" width="350" height="350" border="3" bordercolor="black"> <tr> <td id="tabt"><marquee id="ctr" width="350" height="350" scrollamount="0" Direction="up" Bgcolor="f7f2a2"></marquee></td></tr></table> <div align="center"><a href="http://foxland.ucoz.ru/index/chitalka_html/0-69#">HTML</a></div> </div> <script> $('#btn1').click(function(){ $('#ctr').attr('scrollamount','1.5'); }); $('#btn2').click(function(){ $('#ctr').attr('scrollamount','0'); }); $('#btn3').click(function(){ $('#ctr').attr('scrollamount','3'); }); $('#btn3p').click(function(){ $('#ctr').attr('scrollamount','10'); }); $('#btn4').click(function(){ $('#ctr').attr('scrollamount','1'); }); $('#btn4p').click(function(){ $('#ctr').attr('scrollamount','0.5'); }); $('#btn5').click(function(){ $('#ctr').attr('direction','up'); }); $('#btn6').click(function(){ $('#ctr').attr('direction','down'); }); </script> <script> $('#ctr').css('background-color','#dddddd'); $('#ctr').html('<b>Здесь будет размещаться ваш контент</b><br><hr>'); </script>